<template>
    <view class="notice-detail">

        <view class="content">
            <view :id="'section0'" ref="section0">
                <!-- 基本信息 -->
                <view class="section">
                    <view class="section-title" @click="showInfo = !showInfo">基本信息
                        <view class="toggle">{{ showInfo ? '收起' : '展开' }}
                            <image :class="['toggle-icon', showInfo ? 'toggle-active' : '']"
                                src="@/static/images/right.png">

                            </image>
                        </view>
                    </view>
                    <view v-if="showInfo">
                        <view class="row">
                            <text class="label">微信群ID</text>
                            <text class="value">{{ rescueNoticeAiSession.groupId || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">微信群名称</text>
                            <text class="value">{{ rescueNoticeAiSession.groupName || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">会话ID</text>
                            <text class="value">{{ rescueNoticeAiSession.id || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">会话参与人数</text>
                            <text class="value">{{ rescueNoticeAiSession.memberCount || '0' }}人</text>
                        </view>
                        <view class="row">
                            <text class="label">会话参与人</text>
                            <text class="value">{{ rescueNoticeAiSession.member || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">会话开始时间</text>
                            <text class="value">{{ rescueNoticeAiSession.chatBeginTime || '-' }}</text>

                        </view>
                        <view class="row">
                            <text class="label">会话结束时间</text>
                            <text class="value">{{ rescueNoticeAiSession.chatEndTime || '-' }}</text>

                        </view>
                        <view class="row">
                            <text class="label">是否转人工</text>
                            <text class="value">{{ rescueNoticeAiSession.isConvert == 1 ? '是' : '否' }}</text>

                        </view>
                    </view>

                </view>
            </view>
            <view :id="'section1'" ref="section1">

                <view class="section">
                    <view class="section-title" @click="showMsg = !showMsg">
                        会话内容
                        <view class="toggle">{{ showMsg ? '收起' : '展开' }}
                            <image :class="['toggle-icon', showMsg ? 'toggle-active' : '']"
                                src="@/static/images/right.png">

                            </image>
                        </view>
                    </view>
                    <view v-if="showMsg">
                        <view class="msg-item" v-for="(item) in rescueNoticeAiSessionContents" :key="item.id">
                            <view class="msg-item-head">
                                <view class="user-info" v-if="item.admin">
                                    <image src="@/static/images/msg_admin.png">

                                    </image>
                                    希道AI智能客服
                                </view>
                                <view class="user-info" v-else>
                                    <image src="@/static/images/msg_user.png">

                                    </image>
                                    {{ item.member || '用户' }}
                                </view>
                                
                                <view class="time">
                                    {{ item.createTime || '-' }}
                                </view>
                            </view>
                            <text class="msg-item-content">{{ item.content || '-' }}</text>
                        </view>

                    </view>
                </view>
            </view>

        </view>

    </view>
</template>

<script>
import { getNoticeDetail, getRescue } from '@/apis/rescue';
export default {
	components: {},
	data() {
		return {
			planDetail: {},
			id: '',
			detail: {},
			showMsg: true,
			showInfo: true,

			rescueNoticeAiSession: {},
			rescueNoticeAiSessionContents: []

		};
	},
	computed: {

	},
	onLoad(os) {
		this.id = os.id;
		this.getNoticeDetail();
	},
	mounted() {

	},
	methods: {

		getRescue(id) {
			getRescue(id).then(res => {
				this.planDetail = res.data;
			});
		},

		getNoticeDetail() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			getNoticeDetail({ rescueNoticeId: this.id }).then(res => {
				this.detail = res.data;
				if (this.detail.aiRescueNoticeVO) {
					// 会话信息与会话历史
					this.rescueNoticeAiSession = this.detail.aiRescueNoticeVO.rescueNoticeAiSession || {};
                    
					let msgs  = this.detail.aiRescueNoticeVO.rescueNoticeAiSessionContents || [];
					msgs.forEach(item=>{
						if (item.content && item.content.indexOf('content=') == -1) {
							item.admin = 1;
						}
						item.content = this.extractContent(item.content);
					});
					this.rescueNoticeAiSessionContents = msgs;
				}
				uni.hideLoading();
			});
		},
		extractContent(text) {
			if (!text || text.indexOf('content=') == -1) return text;
			// 匹配整个content字段的正则表达式
			const regex = /content=([^,]+)(?=,|\s*\))/;
			const match = text.match(regex);

			// 若匹配成功则返回content值，否则返回null
			return match ? match[1] : null;
		},

		callPhoneNumber(phone, name) {
			if (phone) {
				uni.showModal({
					title: name ? ('呼叫' + name) : '拨打电话',
					content: phone,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone
							});
						}
					},
				});
			} else {
				uni.showToast({
					title: '无效的电话号码',
					icon: 'none'
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.notice-detail {
    position: relative;
    background: #f7f8fa;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;

    .content {
        min-height: 100vh;
        box-sizing: border-box;
        padding-bottom: 140rpx;
    }

    .section {
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 32rpx;
        border-radius: 4px;
        padding: 24rpx;
        padding-bottom: 0;
        margin: 20rpx;
        margin-bottom: 0;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

        .section-title {
            font-weight: bold;
            padding-bottom: 24rpx;
            font-size: 32rpx;
            color: #3D3D3D;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .msg-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 32rpx;

            &-head {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 8rpx;

                .user-info {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    font-size: 24rpx;
                    color: #666;

                    image {
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 4rpx;
                    }
                }

                .time {
                    font-size: 24rpx;
                    color: #666;
                }
            }

            &-content {
                font-size: 28rpx;
                color: #333;
            }
        }

        .row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 32rpx;

            .label {
                color: #3D3D3D;
                font-weight: bold;
                font-size: 26rpx;
                margin-bottom: 8rpx;
            }

            .value {
                color: #333;
                font-size: 28rpx;
                word-break: break-all;
            }

            .phone,
            .link {
                color: #0091FF;
                font-size: 28rpx;

                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 2rpx;
                    // padding-top: 2rpx;
                    padding-bottom: 2rpx;
                    vertical-align: text-bottom;
                }
            }

            .done {
                color: #999;
                font-size: 24rpx;
                margin-left: 8rpx;
                border-radius: 2px;
                padding: 0 4rpx;
                vertical-align: top;
                border: 1px solid #999999;
            }

            .tag {
                color: #0091FF;
                font-size: 24rpx;
                margin-left: 8rpx;
                border-radius: 2px;
                padding: 0 4rpx;
                background-color: #DCF0FF;
                // vertical-align: top;
                margin-right: 4rpx;
                // border: 1px solid #0091FF;
            }
        }

        .address {
            .value {
                white-space: pre-line;
            }
        }
    }
    
    .order{
                display: flex;
                align-items: center;
            }

    .fixed-btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        padding: 16rpx 24rpx 32rpx 24rpx;
        box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
        z-index: 10;

        .confirm-btn {
            width: 100%;
            font-size: 28rpx;
            border-radius: 8rpx;
            height: 68rpx;
            line-height: 68rpx;
            background-color: #0091FF;
        }
    }

    .bottom-placeholder {
        height: 120rpx;
    }

    .toggle {
        font-size: 24rpx;
        margin-left: auto;
        display: flex;
        align-items: center;
        color: #0091FF;
        font-weight: normal;

    }

    .toggle-icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 4rpx;
        //旋转90度
        transform: rotate(90deg);
        transition: .3s all;
    }

    .toggle-active {
        transform: rotate(-90deg);
    }
}
</style>